<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="Expires" content="-1" />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Cache-Control" content="no-cache" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <title>中秋节活动</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
    <style>
        html,body{
            margin:0;
            padding:0;
            width:100%;
            height:100%;
        }
        #gameBox{
            width: 100%;
            height:100%;
            background:#4C4C4C;
        }
        #gameinfo{
            width:100%;
            height:40%;
            background:url("img/play_header.png") no-repeat center center;
            background-size:100% 100%;
        }
        #gameinfo .gameinfo{
            margin:0 auto;
            width:100%;
            height:85%;
            background:url("img/play_header_bg.png") no-repeat center 70%;
            background-size:100% 80%;
        }
        #gameinfo .game-feng{
            display:inline-block;
            width: 32%;
            position:relative;
            margin-top: 7%;
            left:10%;
            text-align:center;
            border:1px solid transparent;
        }
        #gameinfo .defeng-title{
            color:#fff;
            font-weight:bold;
            font-size:16px;
            margin-bottom:0;
            margin-top:25px;
        }
        .game-feng span{
            color:#fff;
            font-size:14px;
        }
        #gameDivide{
            color:#E7A63E;
            font-size:42px;
        }
        .gameinfo .game-time{
            display:inline-block;
            width:18%;
            text-align:center;
            position:relative;
            top:17%;
            left:6%;
            font-weight:bold;
        }
        .gameinfo .time-info{
            margin:0;
        }
        #gameTime{
            font-size:24px;
            line-height:10px;
        }
        #layerbox{
            position:fixed;
            top:0;
            left:0;
            bottom:0;
            right:0;
            background:rgba(0,0,0,.6)
        }
        #noWinprinze,#changeSuccess,#winPrize,#changefail{
            width:70%;
            height:35%;
            position:absolute;
            left:50%;
            top:40%;
            transform: translate(-50%,-50%);
            background:url("img/fail_bg.png") no-repeat center center;
            background-size:100% 100%;
            z-index:10;
        }
        #noWinprinze .prizeResult,#winPrize .prizeResult,#changefail .prizeResult{
            color:#fff;
            text-align:center;
            font-size:24px;
            line-height:24px;
            font-weight:bold;
            margin:40px 15px 0 0;

        }
        #noWinprinze .prizeinfo,#winPrize .prizeinfo,#changefail .prizeinfo{
            text-align:center;
            color:#fff;
            margin:10px 18px 0 0;
            font-size:16px;
            font-weight:bold;
        }
        #noWinprinze button,#changeSuccess button,#winPrize button,#changefail button{
            background:#F3C776;
            color:#CC891A;
            height:32px;
            font-weight:bold;
            line-height:32px;
            width:55%;
            border-radius: 6px;
            display:block;
            margin:12px auto;
            border:none;
            text-align:center;
            box-shadow: 0 5px 5px #E39B25;
        }
        #changefail button{
            margin:30px auto;
        }
        #changeSuccess{
            width:80%;
            height:50%;
            top:30%;
            transform:translate(-42%,-50%);
            background:url("img/change_bg.png") no-repeat center center;
            background-size:100% 100%;
        }
        #changeSuccess .prizeResult{
            margin:130px 35px 0 0;
            text-align:center;
            font-size:24px;
            color:#FF8000;
            font-weight:bold;
        }
        #changeSuccess .prizeinfo{
            color:#000;
            text-align:center;
            font-weight:bold;
            font-size:16px;
            margin:10px 45px 0 0;
        }
        #changeSuccess button{
            width:50%;
            margin:45px 0 0 50px;
            font-size:16px;
        }
        #winPrize{
            background:url("img/success_bg.png") no-repeat center center;
            background-size:100% 100%;
        }
        #winPrize .prizeResult{
            color:#FF8000;
        }
        #winPrize .prizeinfo{
            color:#000;
        }
    </style>
</head>
<body>
<div id="gameBox">
    <div id="gameinfo">
        <div class="gameinfo">
                <div class="game-feng">
                    <p class="defeng-title">游戏得分</p>
                    <span id="gameDivide">0</span>
                    <span>分</span>
                </div>
                <div class="game-time">
                    <p class="time-info"> 倒计时</p>
                    <span id="gameTime">60</span>
                    <span>秒</span>
                </div>
        </div>
    </div>
    <div id="playGame">
        <canvas id="mycanvas"></canvas>
    </div>
</div>
    <div id="layerbox" style="display:none">
        <div id="noWinprinze" style="display:none;">
            <p class="prizeResult">很遗憾没中奖</p>
            <p class="prizeinfo">再接再厉大奖等着你!</p>
            <button>再来一次</button>
        </div>
        <div id="changeSuccess" style="display:none;">
            <p class="prizeResult">挑战成功!</p>
            <p class="prizeinfo">获得抽奖机会一次!</p>
            <button>点击抽奖</button>
        </div>
        <div id="changefail">
            <p class="prizeResult">挑战失败!</p>
            <p class="prizeinfo">再接再厉大奖等着你!</p>
            <button>再来一次</button>
        </div>
        <div id="winPrize" style="display:none;">
            <p class="prizeResult">中奖啦</p>
            <p class="prizeinfo">获得奖品一份!</p>
            <button>填写收货地址</button>
        </div>
        <img style="display:none;" src="img/share.png" alt="" id="share" width="100%" height="100%">
    </div>
<script type="text/javascript" src="js/Game.js"></script>
<script type="text/javascript" src="js/underscore-min.js"></script>
<script type="text/javascript" src="js/Sprite.js"></script>
<script type="text/javascript" src="js/Map.js"></script>
<script type="text/javascript">
    var game = new Game();
</script>
</body>
</html>